<template>
  <div class="main">
    <div class="nav">
      <Nav></Nav>
    </div>
    <div class="center">
      <div class="banner">
        <img src="images/banner.jpg" />
      </div>
      <div class="content">
        <Content></Content>
      </div>
    </div>
  </div>
</template>
<script>

  import Nav from '../components/Nav.vue'
  import Content from '../components/Content.vue'

  export default {
    components: {
      Nav,
      Content
    }
  }

</script>
<style>
  /* basics s */
  body, ul {
    margin: 0px;
    padding: 0px;
  }
  li {
    list-style: none;
  }
  /* basics e */
  body {
    background-color: #f5f5f5;
  }
  .main {
    width: 1200px;
    margin: 20px auto;
    display: flex;
  }
  .nav {
    width: 100px;
    margin-right: 5px;
  }
  .center {
    width: 1000px;
    margin-left: 5px;
  }
  .banner {
    width: 1000px;
    height: 200px;
  }
  .banner img {
    width: 100%;
    height: 100%;
  }
</style>